<template>
  <el-container class="layout-container">
    <!-- 主侧边栏 -->
    <MainSidebar @menu-select="handleMainMenuSelect" />

    <!-- 副侧边栏 -->
    <SubSidebar :visible="showSubMenu" :main-menu="activeMainMenu" />

    <!-- 主要内容区域 -->
    <el-container :class="['main-container', showSubMenu ? 'with-sub-sidebar' : '']">
      <router-view />
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import MainSidebar from './MainSidebar.vue'
import SubSidebar from './SubSidebar.vue'

const activeMainMenu = ref('dashboard')
const showSubMenu = ref(true)
const route = useRoute()

const handleMainMenuSelect = (index) => {
  activeMainMenu.value = index
  showSubMenu.value = index === 'dashboard' || index === 'permissions'
}

// 监听路由变化，更新菜单状态
watch(() => route.path, (newPath) => {
  if (newPath.startsWith('/analysis')) {
    activeMainMenu.value = 'dashboard'
    showSubMenu.value = true
  } else if (newPath.startsWith('/permissions')) {
    activeMainMenu.value = 'permissions'
    showSubMenu.value = true
  } else {
    activeMainMenu.value = newPath.split('/')[1]
    showSubMenu.value = false
  }
}, { immediate: true })
</script>

<style scoped>
.layout-container {
  min-height: 100vh;
  background-color: #F5F6F7;
}

.main-container {
  margin-left: 200px;
  background-color: #F5F6F7;
  height: 100vh;
  overflow-y: auto;
  transition: margin-left 0.3s;
}

.main-container.with-sub-sidebar {
  margin-left: 400px;
}
</style>